<template>
  <div class="main">
    <top-bar></top-bar>
    <div class="main-mains w90">
      <div class="main-mains-l">
        <router-link to="/main">
          <div class="main-mains-l-return">
            <span>←</span>
            返回首页
          </div>
        </router-link>
        <div class="active">员工积分总排名</div>
        <router-link to="/rankings">
          <div>员工积分月排名</div>
        </router-link>
      </div>
      <div class="main-mains-r">
        <div class="main-mains-table" v-show="dataFlag">
          <table>
            <tr>
              <th>姓名</th>
              <th>工号</th>
              <th>积分</th>
              <th>排名</th>
            </tr>
            <tr v-for="(item,index) in dataList" :key="index">
              <td>{{item.name}}</td>
              <td>{{item.workNo}}</td>
              <td>{{item.amountIntegral}}</td>
              <td>{{item.remark}}</td>
            </tr>
          </table>
          <div class="main-pages">
            <el-pagination background layout="prev, pager, next" :page-size="15" @current-change="changePage" :total="totalNum">
            </el-pagination>
          </div>
        </div>
        <div class="main-mains-none" v-show="!dataFlag">
          <img src="../../../static/images/none.png" alt=""><br>
          <div>暂无记录</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import topBar from "../public/top";
export default {
  components: {
    topBar
  },
  data() {
    return {
      dataList: [],
      dataFlag: false,
      totalNum: 1,
      pages: 1
    };
  },
  methods: {
    changePage(val) {
      this.pages = val;
      this.getData();
    },
    getData() {
      let _this = this;
      _this
        .$http({
          url:
            _this.urls +
            "/user/list.do" +
            "?PageSize=15&startPage=" +
            _this.pages,
          method: "get"
        })
        .then(function(res) {
          let data = res.data;
          if (data.status == "success") {
            _this.dataList = data.data.list;
            _this.totalNum = data.data.total;
            if (data.data.total) {
              _this.dataFlag = true;
            }
          } else {
            _this.$message({
              showClose: true,
              message: data.msg,
              type: "error"
            });
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  mounted() {
    this.getData();
  }
};
</script>

<style lang="less" scoped>
@import "ranking.less";
</style>

